<template>
	<div class="box" style="background: #fff;padding: 10px;">
		<div class="header">
			<div class="left">
				<p>BMI指数</p>
				<h3 style="margin-top: 10px">{{headerDate.bmi || '---'}}</h3>
			</div>
			<div class="center">
				<h3>{{headerDate.dateWeight || '---'}}斤</h3>
				<p style="font-size: 10px; margin-top: 10px">{{headerDate.dateTime || '---'}}</p>
			</div>
			<div class="right">
				<p>对比前一天</p>
				<h3 style="margin-top: 10px">
					<!-- 体重上升 -->
					<image v-if="headerDate.nextWeight && headerDate.nextWeight > 0" style="width: 16px;height: 16px;"
						src="https://mp-b0e75062-7b5f-440f-98a6-55e57dc35f9a.cdn.bspapp.com/icon/上升.svg">
					</image>
					<!-- 体重下降 -->
					<image v-if="headerDate.nextWeight && headerDate.nextWeight < 0" style="width: 16px;height: 16px;"
						src="https://mp-b0e75062-7b5f-440f-98a6-55e57dc35f9a.cdn.bspapp.com/icon/go down.svg">
					</image>
					<span style="margin-left: 5px;">{{headerDate.nextWeight || '---'}}斤</span>
				</h3>
			</div>
		</div>

		<div class="btn">
			<div class="btn-box" @click="addWeight('isShowInputWeight')"> 
				<image src="https://mp-b0e75062-7b5f-440f-98a6-55e57dc35f9a.cdn.bspapp.com/icon/添加 (1).svg" mode=""></image>
				<p>体重</p>
			</div>
			
		</div>

		<div class="echarts_box">
			<h3>我的趋势</h3>
			<div style="width: 100%; height: 85%; position: relative;">
				<myEcharts :echartsObj='echartsObj' title='体重' color="#1890FF" ></myEcharts>
			</div>
		</div>
		
		
		<div class="report_box">
			<h3>减肥报告</h3>
			<div>
				<p style="font-weight: 700;">前言</p>
				<p>
					本报告旨在总结个人在过去XX周内的减肥经历，包括减肥目标设定、采用的减肥方法、日常饮食调整、运动计划执行情况、体重及体脂率变化、遇到的挑战与应对策略，以及最终的减肥成果与反思。通过这份报告，希望能够为同样希望减肥的朋友提供一些参考和启示。
				</p>
				
				<p style="font-weight: 700;">减肥情况：</p>
				<p >初始体重：{{initList[0].weight}}斤</p>
				<p >当前体重：{{initList[initList.length - 1].weight}}斤</p>
				<p>BMI指数：{{headerDate.bmi}}</p>
				<p>计算标准公式：{{headerDate.dateWeight / 2}}(体重kg) / {{userInfo.stature / 2}}²(身高m)</p>
				
				<p style="font-weight: 700;">BMI指数标准</p>
				<p>正常范围：18.5-22.9 （这个标准与WHO标准略有不同，但同样认为BMI值在这个范围内是健康的。）</p>
				<p>体重过轻：小于18.5。（与WHO标准相同，表示体重过轻。）</p>
				<p>超重：≥23.0。（这个标准将超重的起点设定得比WHO标准低，可能更适用于亚洲人群的体质特点。）</p>
				<p>肥胖前期：23.0-24.9。</p>
				<p>中度肥胖：25.0-29.9。</p>
				<p>重度肥胖：≥30.0。</p>
				<p>接下来请再接再厉</p>
				
				<p style="font-weight: 700;">减肥目标设定：</p>
				<p>主要目标：减少体重、降低体脂率、提升身体健康状况</p>
				<p>次要目标：改善饮食习惯、增强体能、提升自信心</p>

				<p style="font-weight: 700;">减肥方法(建议)：</p>
				<p>
					饮食调整：
					采用低热量、高蛋白、高纤维的饮食原则，减少高糖、高脂肪食物的摄入。
					每日三餐定时定量，避免零食和夜宵，增加蔬菜水果比例。
					多喝水，保持身体水分平衡，促进新陈代谢。
				</p>
				<p>
					运动计划：
					制定每周至少5天，每天30-60分钟的有氧运动计划，如慢跑、游泳、骑自行车等。
					结合力量训练，每周2-3次，增强肌肉量，提高基础代谢率。
					利用碎片时间进行日常活动，如步行上下楼梯、做家务等，增加日常消耗。
					心理调适： 保持积极乐观的心态，设定小目标，逐步达成大目标。
					记录减肥日记，记录饮食、运动及身体变化，增强自我监控能力。
					寻求家人、朋友或专业人士的支持与鼓励，共同面对挑战。
				</p>
				
				
			</div>
		</div>

		<!-- 输入体重 -->
		<van-popup :show="isShowInputWeight" position="top" custom-style="height: 20%;"
			@close="isShowInputWeight = false" round>
			<div class="inp_box" >
				<input class="inp_change" type="text" v-model="weight" placeholder="请输入当前体重" />
			</div>
			<div class="btn_boxMax">
				<button @click="save">保存</button>
				<button @click="isShowInputWeight = false" style="background: #fff;color: #333;">取消</button>
			</div>
		</van-popup>
		
		
	</div>
</template>

<script>
	import myEcharts from "@/components/echarts/index.vue";
	export default {
		data() {
			return {
				isShowInputWeight: false,
				historyDialog:'' ,//历史弹出框记录
				
				weight: '',

				userInfo: {},

				initList: [], //数据集合

				headerDate: {}, //计算头部数据

				// echarts 数据
				echartsObj: {
					title: [],
					array: []
				},
				
			};
		},

		components: {
			myEcharts,
		},

		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.getInit()
		},

		methods: {
			// 初始化数据
			async getInit() {
				let result = await this.$axios("overallSituation", {
					databaseName: "weightList",
					state: "look",
					queryId: this.userInfo._id
				}, true)


				this.headerDate.dateWeight = result.data[0].weight //最新数据的体重
				this.headerDate.dateTime = result.data[0].createTime //最新数据创建的天数

				// 计算bmi指数
				if (this.userInfo.stature) {
					let stature_2 = (this.userInfo.stature / 100) * (this.userInfo.stature / 100) //身高 米 的平方
					this.headerDate.bmi = ((result.data[0].weight / 2) / stature_2).toFixed(2) //最新数据创建的天数
				}

				if (result.data.length >= 2) {
					let res = result.data[0].weight - result.data[1].weight
					// 最新数据 对比 就旧的数据 计算的出 对比差距
					this.headerDate.nextWeight = res.toFixed(2)
				}

				// 根据创建时间 倒叙排序
				result.data.sort((a, b) => {
					// 将字符串转换为 Date 对象以正确比较日期
					const dateA = new Date(a.createTime);
					const dateB = new Date(b.createTime);

					// 返回值决定排序顺序：正数表示 a 在 b 之后，负数表示 a 在 b 之前
					return dateA - dateB;
				});

				// 整理echarts 图标 数据
				this.echartsObj.title = []
				this.echartsObj.array = []
				let count = 0 //只显示十五天以内的数据图
				result.data.forEach(item => {
					if (count > 15) return
					let month = new Date(item.createTime).getDate()
					this.echartsObj.title.push(month < 10 ? `0${month}` : month)
					this.echartsObj.array.push(Number(item.weight) || 0)
					count++
				})
				
				this.initList = result.data
			},

			// 保存按钮
			async save() {
				let prarms = {
					createTime: this.getTime(),
					userName: this.userInfo.userName,
					queryId: this.userInfo._id
				}
				
				console.log(this.historyDialog , 'this.historyDialog------------');
				if(this.historyDialog == 'isShowInputCalorie'){
					prarms.calorie = this.calorie //消耗大卡
				}else if(this.historyDialog == 'isShowInputWeight'){
					prarms.weight = this.weight //消耗体重
				}

				// 查询当前日期是否存在体重
				let lookHistoryDateTime = await this.$axios("overallSituation", {
					databaseName: "weightList",
					state: "look",
					createTime: prarms.createTime,
					queryId: this.userInfo._id
				}, false)

				if (lookHistoryDateTime.data.length != 0) {
					// 修改当前数据
					let updateResulst = await this.$axios("overallSituation", {
						databaseName: "weightList",
						state: "update",
						_id: lookHistoryDateTime.data[0]._id,
						...prarms
					}, false)

					this[this.historyDialog] = false
					this.getInit()
				} else {
					// 新增一条新的数据
					let addResulst = await this.$axios("overallSituation", {
						databaseName: "weightList",
						state: "add", 
						...prarms
					}, false)

					this[this.historyDialog] = false
					this.getInit()
				}
			},

			getTime() {
				let date = new Date()

				let year = date.getFullYear()
				let month = (date.getMonth() + 1) >= 10 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1)
				let day = date.getDate() >= 10 ? date.getDate() : '0' + (date.getDate())
				let h = date.getHours() >= 10 ? date.getHours() : '0' + (date.getHours())
				let m = date.getMinutes() >= 10 ? date.getMinutes() : '0' + (date.getMinutes())
				let s = date.getSeconds() >= 10 ? date.getSeconds() : '0' + (date.getSeconds())
				return year + '-' + month + '-' + day
			},

			// 添加体重
			addWeight(str) {
				this.historyDialog = str
				this[str] = true
			}
		},
	};
</script>

<style scoped>
	.header {
		width: 100%;
		height: 20vh;
		background: #31342d;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
		padding: 15px 0;
		box-sizing: border-box;
	}

	.header p {
		font-size: 12px !important;
		color: #f1f1f1 !important;
		font-weight: 400 !important;
	}

	.header .left,
	.header .center,
	.header .right {
		font-weight: 700;
		color: #fff;
		font-size: 18px;
		width: 33.33%;
		height: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center; 
	}

	.header .left,
	.header .center {
		border-right: 1px solid #f1f1f1;
	}

	.btn {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		height: 8vh;
		background: #fff;
		box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.4);
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}
	
	.btn .btn-box {
		text-align: center;
	}

	.btn .btn-box image {
		width: 24px;
		height: 24px;
	}

	.btn .btn-box p {
		font-size: 12px;
		margin-top: 2px;
		color: #333;
	}

	.echarts_box {
		margin-top: 10px;
		width: 100%;
		height: 40vh;
		background: #fff;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
		border-radius: 10px;
		padding: 10px;
		box-sizing: border-box;
		overflow: hidden;
	}

	.echarts_box h3 {
		width: 100%;
		height: 15%;
		font-weight: 700;
	}

	.report_box {
		margin-top: 10px;
		width: 100%;
		background: #fff;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
		border-radius: 10px;
		padding: 10px;
		box-sizing: border-box;
	}

	.report_box h3 {
		width: 100%;
		height: 15%;
		font-weight: 700;
	}

	.report_box p {
		font-size: 12px;
		color: #666;
		margin: 10px;
	}

	.inp_box {
		width: 100%;
		height: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.inp_box .inp_change {
		border-radius: 5px;
		width: 95%;
		height: 35px;
		border: 1px solid #999;
		font-size: 12px;
		padding: 0 10px;
		box-sizing: border-box;
		color: #333;
		font-weight: 700;
	}

	.btn_boxMax {
		width: 100%;
		height: 50%;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding: 10px 0;
		box-sizing: border-box;
	}

	.btn_boxMax button {
		width: 48%;
		height: 40px;
		background: #31342d;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		border: 1px solid #333;

	}
</style>